<template>
  <div class="content" :style="{background: 'url(static/icon-background.png) repeat center center'}">
    <div class="pl50 pr50 pt">
      <div class="con-style flex jus-center">
        <div>
          <div class="dui flex jus-center aln-center">
            <i class="iconfont icon-success ft light-green"></i>
          </div>
          <div class="mt50">
            <div class="ft44">恭喜您成功加入</div>
            <span class="ft36">【{{comName.companyName}}】</span>
            <div class="mt64">立即使用龙决策，和小伙伴们一起助餐厅日进斗金</div>
            <div class="pl50 pr50 mt80">
              <mt-button size="large" type="primary">点击下载龙决策应用</mt-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        comName: this.$route.query
      };
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";

  .pt {
    padding-top: px2rem(200px);
  }

  .mt50 {
    margin-top: px2rem(50px);
  }

  .mt64 {
    margin-top: px2rem(64px);
    color: #666;
  }

  .mt80 {
    margin-top: px2rem(80px);
  }

  .con-style {
    height: px2rem(574px);
    background: #fff;
    border-radius: px2rem(40px);
  }

  .dui {
    height: px2rem(180px);
    width: px2rem(180px);
    background: #fff;
    border-radius: 50%;
    margin-top: px2rem(-90px);
    margin-left: calc(50% - 45px);
  }

  .ft44 {
    font-size: px2rem(44px);
    font-weight: bold;
  }

  .ft36 {
    font-size: px2rem(36px);
    font-weight: bold;
  }

  .flex {
    display: flex;
  }

  .aln-center {
    align-items: center;
  }

  .jus-center {
    justify-content: center;
  }

  .ft {
    font-size: px2rem(160px);
  }
</style>
